<template>
  <div class="play-page" :class="{show: isShowPlayPage}">
    <div class="filter-bg"></div>
    <div class="play-content">

      <!-- 导航 -->
      <div class="play-nav">
        <div class="p-close" @click="setIsShowPlayPage(false)">
          <img class="auto-img" src="../assets/arrow-down.png" alt="">
        </div>
        <div class="pss">
          <div class="p-song">{{currentAudioInfo.songName}}</div>
          <div class="p-singer">{{currentAudioInfo.singerName}} <span class="focus" @click="goSingerDetail">关注</span></div>
        </div>
      </div>

      <!-- 歌词 -->
      <div class="song-word">

        <!-- 歌词盒子 -->
        <div class="sword-box" :style="{top: top + 'px'}">
          <div v-for="(item, index) in curLyric" :class="{'song-active': songLycActiveIndex === index}" :key="index" :ref="`lyc${index}`">{{item.lyc}}</div>
        </div>

      </div>



      <!-- 播放操作 -->
      <div class="play-control">
        <div class="time-progress">
          <div class="time-text">{{formatCurrentTime}}</div>
          <div class="play-progress" ref="playProgress">
            <div>
              <van-slider v-model="value" active-color="#ee0a24" :max="progressWidth" @drag-start="dragStartProgress" @drag-end="dragEndProgress" @change="changeAudioCurrentTime" @input="changeProgress">
                <template #button>
                  <div class="circle-btn"></div>
                </template>
              </van-slider>
            </div>
          </div>
          <div class="time-text">{{formatDuration}}</div>
        </div>
        <div class="play-ctl">
          <div class="play-i" @click="togglePlayMode">
            <!-- 0: 顺序播放, 1: 随机播放, 2: 单曲循环 -->
            <!-- icon-xunhuanbofang: 随机播放 -->
            <!-- icon-suijibofang: 单曲循环 -->
            <!-- icon-tiaojiemoshi: 顺序播放 -->
            <span class="iconfont" :class="[playMode === 0 ? 'icon-tiaojiemoshi' : playMode === 1 ? 'icon-xunhuanbofang' : 'icon-suijibofang']"></span>
          </div>
          <div class="play-i" @click="prevSong">
            <span class="iconfont icon-shangyishouge"></span>
          </div>
          <div class="play-audio" @click="changeAudioStatus">
            <!-- 暂停：icon-zanting, 播放：icon-bofang-->
            <span class="iconfont" :class="[isPlay ? 'icon-zanting' : 'icon-bofang']"></span>
          </div>
          <div class="play-i" @click="nextSong">
            <span class="iconfont icon-xiayishou"></span>
          </div>
          <div class="play-i" @click="toggleShow">
            <span class="iconfont icon-bofanggedan"></span>
          </div>
        </div>
      </div>

    </div>

    <!-- 播放列表 -->
    <van-popup v-model="show" position="right" :style="{height: '60%'}" :overlay="false" >
      <div class="po-song-list">
        <div class="po-song-list-item" v-for="(item, index) in playList" :key="index">
          <ListItem :singer-data="item" :is-play-icon="true"></ListItem>
        </div>
      </div>
    </van-popup>

  </div>
</template>

<script>

import { mapState, mapMutations, mapGetters } from 'vuex';

import ListItem from '../components/ListItem.vue';

  export default {
    name: 'PlayPage',

    data() {
      return {
        //拖动进度条的值
        dragValue: 0,

        //显示隐播放列表
        show: false
      };
    },

    components: {
      ListItem
    },

    created() {
      this.$nextTick(() => {
        let playProgress = this.$refs.playProgress;
        //   
        this.setProgressWidth(playProgress.clientWidth);
      })
    },

    computed: {
      ...mapState(['isShowPlayPage', 'isPlay', 'currentAudioInfo', '$audio', 'progressWidth', 'duration', 'currentTime', 'currentLyric', 'top', 'songLycActiveIndex', 'lyricHeight', 'initTop', 'playList', 'playMode']),
      ...mapGetters(['formatDuration', 'formatCurrentTime']),

      //监听歌词的变化
      curLyric() {
        //   
        

        this.$nextTick(() => {
          
          if (this.currentLyric.length > 0) {

            //每一句歌词高度的数组
            let heightData = [];

            //   

            //获取前5句歌词的总高度
            let height = 0;

            for (let i = 0; i < this.currentLyric.length; i++) {

              let currentHeight = this.$refs[`lyc${i}`][0].clientHeight;

              if (i < 5) {
                //   
                height += currentHeight;
              }

              heightData.push(currentHeight);
              
            }

            //vuex: 修改歌词盒子的top, initTop
            this.setTop(height);
            this.setInitTop(height);

            //vuex: 修改每一个歌词高度的数组
            this.setLyricHeight(heightData)

            //   
          }
        })

        

        

        return this.currentLyric;
      },

      //slider进度条的进度
      value: {

        set(v) {
          //   
          this.dragValue = v;
          let currentTime = v / this.progressWidth * this.duration;
          //vuex: 修改currentTime
          this.setCurrentTime(currentTime);
          
        },

        get() {
          return this.currentTime / this.duration * this.progressWidth;
        }
      }

    },

    methods: {
      ...mapMutations(['setIsShowPlayPage', 'setAudioPlayStatus', 'setProgressWidth', 'setIsDragProgress', 'setCurrentTime', 'setTop', 'setLyricHeight', 'setInitTop', 'setIsChange', 'setSongLycActiveIndex', 'setAudioId', 'setPlayMode']),

      //显示或者隐藏歌曲列表
      toggleShow() {
        this.show = !this.show;
      },

      //修改音频的播放状态
      changeAudioStatus() {

        if (this.currentAudioInfo.audioId === '') {
          return;
        }

        if (this.isPlay) {
          this.$audio.pause();
        } else {
          this.$audio.play();
        }

        this.setAudioPlayStatus(!this.isPlay);
      },

      //开始拖动进度条
      dragStartProgress() {
        //   
        this.setIsDragProgress(true);
        this.setIsChange(true);
      },

      //结束拖动进度条
      dragEndProgress() {
        //   
        this.setIsDragProgress(false);
          
        //修改音频的当前播放时间
        this.$audio.currentTime = this.dragValue / this.progressWidth * this.duration;

        setTimeout(() => {
          this.setIsChange(false);
        }, 500)
      },

      //根据音频的播放时间查找高亮歌词
      findActiveSongByCurrentTime(currentTime) {
        for (let i = 0; i < this.currentLyric.length; i++) {
          //前一句歌词的时间
          let beforeTime = this.currentLyric[i].time;
          //后一句歌词的时间(如果i是一个最后一个值, 则 i+1 越界)
          let afterTime = 0;
          if (i + 1 === this.currentLyric.length) {
            //如果越界, 则使用当前时间 + 1
            afterTime = currentTime + 1;
          } else {
            afterTime = this.currentLyric[i + 1].time;
          }

          if (currentTime >= beforeTime && currentTime < afterTime) {
            //   
            //vuex: 修改songLycActiveIndex
            let height = this.lyricHeight.slice(0, i);
              
            let h = 0;
            height.forEach(v => {
              h += v;
            })
              
            let top0 = this.initTop - h;
            this.setTop(top0);
            this.setSongLycActiveIndex(i);

            break;
          }
        }
      },

      //点击进度条改变音频播放进度
      changeAudioCurrentTime(value) {
        //   
        this.setIsChange(true);
        //修改音频进度
        let currentTime = value / this.progressWidth * this.duration;

        //根据音频的播放时间查找高亮歌词
        this.findActiveSongByCurrentTime(currentTime);

        this.$audio.currentTime = currentTime;

        setTimeout(() => {
          this.setIsChange(false);
        }, 500)
      },

      //实时改变进度条
      changeProgress(value) {
        //   
        //修改音频进度
        let currentTime = value / this.progressWidth * this.duration;
        //根据音频的播放时间查找高亮歌词
        this.findActiveSongByCurrentTime(currentTime);
      },

      //修改播放模式
      togglePlayMode() {
        let mode = this.playMode;
        if (mode === 2) {
          mode = 0;
        } else {
          mode++;
        }
        
        //vuex: 修改playMode
        this.setPlayMode(mode);
      },

      //下一首歌曲
      nextSong() {
        //   
        //播放模式, 0: 顺序播放, 1: 随机播放, 2: 单曲循环

         let song = {};

        //顺序播放
        //如果当前播放歌曲是播放列表最后一首歌曲, 则播放第一首歌曲, 否则取下一首歌曲播放
        //如果用户主动点击下一首, 单曲循环则按照顺序播放取歌曲
        if (this.playMode === 0 || this.playMode === 2) {
          //当前播放的歌曲是否为歌曲播放列表的最后一首歌曲
          //通过歌曲id查找
          let songIndex = -1;
          for (let i = 0; i < this.playList.length; i++) {
            if (this.playList[i].id === this.currentAudioInfo.audioId) {
              songIndex = i;
              break;
            }
          }

          if (songIndex === this.playList.length - 1) {
            //当前播放歌曲为歌曲列表的最后一首歌曲
            //则播放第一首歌曲
            song = this.playList[0];

          } else {
            song = this.playList[songIndex + 1];
          }

        } else if (this.playMode === 1) {
          //随机播放
          //在歌曲播放列表生成随机下标
          let index = Math.floor(Math.random() * this.playList.length);

          song = this.playList[index];
          //   

        }

         //vuex, 修改音频id
         this.setAudioId({
            audioId: song.id,
            singerName: song.singerName,
            songName: song.name,
            singerPic: song.picUrl,
            singerId:song.singerId
          });
      },

      //上一首歌曲
      prevSong() {
        //   
      },
      // 关注歌手详情页
      goSingerDetail(){
         
        // this.$route.push({name:"singerDetail"})
      }
    }
  }
</script>

<style lang="less" scoped>
  .play-page{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    // background-color: #ddd;
    z-index: 999;
    transform-origin: right bottom;
    transform: rotate(90deg);
    overflow: hidden;
    transition: transform .4s ease-out;

    &.show{
      transform: rotate(0deg);
    }
    .van-popup{
      color: #FFFEFF;
  background-color: #160742;
    }

    .po-song-list{
      
      width: 230px;
    }
    
    .sword-box{
      // height: 300px;
      // background-color: #aaa;
      position: relative;
      top: 0;
      transition: top .15s linear;
      >div{
        text-align: center;
        color: rgba(255, 255, 255, .5);
        padding: 5px 0;
        font-size: 14px;
        &.song-active{
          color: #e8e8e8;
        }
      }
    }
    .play-i{
      width: 26px;
      height: 26px;
      // background-color: #ddd;
      >span{
        font-size: 26px;
        color: #e8e8e8;
      }

    }
    .play-audio{
      width: 50px;
      height: 50px;
      // background-color: #ddd;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid #e8e8e8;
      text-align: center;
      >span{
        font-size: 36px;
        color: #e8e8e8;
        
        line-height: 50px;
      }
    }
    .play-ctl{
      height: 60px;
      // background-color: #ddd;
      margin: 30px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .circle-btn{
      width: 8px;
      height: 8px;
      background-color: #fff;
      border-radius: 50%;
    }
    .play-progress{
      width: calc(100% - 36px - 36px - 20px);
      margin: 0 10px;
      height: 20px;
      // background-color: #999;
      display: flex;
      align-items: center;
      >div{
        width: 100%;
      }
    }
    .time-text{
      font-size: 10px;
      color: #e8e8e8;
      width: 36px;
      text-align: center;
    }
    .time-progress{
      display: flex;
      align-items: center;
      padding: 0 10px;
    }
    .song-word{
      height: calc(100% - 50px - 150px - 20px - 40px);
      // background-color: #ddd;
      overflow: hidden;
      margin: 20px 10px;
    }
    .play-control{
      height: 150px;
      // background-color: #fff;
      padding: 10px 0;
    }
    .pss{
      text-align: center;
    }
    .play-nav{
      height: 50px;
      // background-color: #ddd;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .p-close{
        position: absolute;
        left: 10px;
        top: 0;
        bottom: 0;
        margin: auto 0;
        width: 24px;
        height: 24px;
        // background-color: #ddd;
      }
      .p-song{
        color: #fff;
        font-size: 14px;
      }
      .p-singer{
        color: #ddd;
        font-size: 12px;
        .focus{
          background-color: #ddd;
          font-size: 10px;
          padding: 1px 3px;
          text-align: center;
          color: #fff;
          margin-left: 5px;
          border-radius: 5px;
        }
      }
    }
    .filter-bg{
      position: absolute;
      width: 100%;
      height: 100%;
      background: url("../../public/images/home/20170219121202_4wAjr.jpeg") no-repeat center center;
      background-size: cover;
      filter: blur(5px);
      z-index: 1;
      transform: scale(1.5); 
      transform-origin: center center;
    }
    .play-content{
      height: 100%;
      background-color: rgba(0, 0, 0, .35);
      position: relative;
      z-index: 2;
    }
  }
</style>